<template>
  <div class="common-layout" style="height: 500px">
    <el-container>
      <el-aside width="200px" class="aside">

        <el-scrollbar class="el-scrollbar">
          <el-menu :default-openeds="['1', '3']">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Menu />
                </el-icon>商品管理
              </template>
              <el-menu-item-group>

                <el-menu-item index="1-1" @click="$router.push('/home/products')">商品列表</el-menu-item>
                <el-menu-item index="1-2" @click="$router.push('/home/sort')">商品分类</el-menu-item>
                <el-menu-item index="1-3">添加商品</el-menu-item>

              </el-menu-item-group>
              <!-- <el-sub-menu index="1-4">
                <template #title>Option4</template>
                <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
              </el-sub-menu> -->
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>

      </el-aside>
      <el-container>
        <el-header class="header" >


          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="title in titleList" >{{ title }}</el-breadcrumb-item>
          </el-breadcrumb>


        </el-header>
        <el-main class="main">
         
          <router-view></router-view>

        </el-main>
      </el-container>
    </el-container>
  </div>

  <!-- <div>
    <button @click="countStore.count++">点击</button>

    {{ countStore.doubleCount }}
    {{ loginStore.tripleCount }}
  </div> -->
</template>

<script setup>

import { ArrowRight } from '@element-plus/icons-vue';
import { computed } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute();

//获取matched数组中的meta中的title的值
const titleList = computed(() => route.matched.map((arr) => arr.meta.title))




</script>

<style>




.aside {
  box-shadow: 1px 0px 3px 1px rgb(70, 70, 67);
  
}

.header {
  box-shadow: 1px 0px 3px 1px rgb(70, 70, 67);

  display: flex;
  align-items: center;
}

.main {
  box-shadow: 1px 0px 3px 1px rgb(70, 70, 67);
}
</style>

